<template>
	<view class="hot_box">
		<!-- 热评区域 -->
		<view class="hot_comm" >
			<view class="hot_user" v-for="(item,index) in hotCommList" :key="index">
				<view class="user_info">
					<view @click="userInfo(item)"><image :src="item.simpleUserInfo.avatar"></image></view>
					<view class="guanzhu"><uni-icons type="plusempty" color="#FF5A5F" size="11"
					></uni-icons>关注</view>
				</view>
				<view class="hot_content">
					{{item.content}}
				</view>
				<view class="comm_op">
					<view>
						<uni-icons type="star" size="20rpx"></uni-icons>
						<text style="font-size: 20rpx;margin-left: 15rpx;">{{item.likedCount}}</text>
						</view>
					<view>
						<uni-icons type="chat" size="20rpx"></uni-icons>
						<text  style="font-size: 20rpx;margin-left: 15rpx;">{{item.replyCount}}</text>
						</view>
					<view><uni-icons type="more-filled" size="20rpx"></uni-icons></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCommHot} from '@/network/yuncun.js'
	export default {
		data(){
			return {
				cookie:'',
				hotCommList:[]
			}
		},
		methods:{
			getCommHotM(){
				getCommHot().then(res => {
					// console.log(res)
					this.hotCommList.push(...res.data.data)
				})
			},
			// 查看用户详情
			userInfo(user){
				// console.log(user)
				uni.navigateTo({
					url:`../user/user?uid=${user.simpleUserInfo.userId}`
				})
			}
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success: () => {
					this.getCommHotM()
				}
			})
		},
		onShow(){
			// this.getCookie()
			this.getCommHotM()
		}
	}
</script>

<style lang="scss">
	.hot_comm{
		.hot_user{
			margin-top: 15rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #F1F1F1;
			.user_info{
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				.guanzhu{
					font-size: 20rpx;
					color: #FF5A5F;
					border: 1px solid #F1F1F1;
					background-color: #ececec;
					border-radius: 10rpx;
				}
			}
			.hot_content{
				text-indent: 50rpx;
				padding: 0 20rpx;
				font-size: 25rpx;
			}
			.comm_op{
				display: flex;
				justify-content: space-around;
			}
		}
	}
</style>
